<template>
  <view class="container">
    <!-- 头部 -->
    <view class="step_header">
      <view class="header_title">完成以下步骤 即可完成商家入住</view>
      <view class="header_desc">依次完成证件资料以及签约，审核通过即可完成入住</view>
    </view>

    <!-- 步骤列表 -->
    <block v-for="(item,index) in stepData" :key="index">
      <view class="step_box"
        :class="[
          index !== stepData.length - 1 && (item.step_status === 1 || reviewType === index + 1 || (reviewType === 0 && index === 0)) ? 'step_item_active' : '',
          index === stepData.length-1 ? 'last_step' : ''
        ]"
      >
        <view class="step_item">
          <!-- 左侧进度条 -->
          <view class="step_line"
            :class="[
              index !== stepData.length-1 && (item.step_status === 1 || reviewType === index + 1 || (reviewType === 0 && index === 0)) ? 'step_line_active' : '',
              index === stepData.length-1 ? 'last_step' : ''
            ]"
          ></view>

          <!-- 步骤内容 -->
          <view class="step_content">
            <!-- 标题 -->
            <view class="step_header_content">
              <text class="step_index"
                :class="(item.step_status === 1 || reviewType === index + 1 || (reviewType === 0 && index === 0)) ? 'step_index_active' : ''">
                步骤{{index + 1}}
              </text>
              <text class="step_subtitle">{{item.subtitle}}</text>
            </view>

            <!-- 步骤详情 + 按钮 -->
            <view class="step_body"
              :class="(item.step_status === 1 || reviewType === index + 1 || (reviewType === 0 && index === 0)) ? 'step_body_active' : ''"
            >
              <view class="step_left">
                <view class="step_icon">
                  <image src="../../static/images/icon-collection-code.png" mode="widthFix"></image>
                </view>
                <view class="step_info">
                  <view class="step_title">{{item.title}}</view>
                  <view class="step_desc" :class="item.step_status < 0 ? 'step_desc_error' : ''">
                    <text v-if="item.step_status < 0">
                      {{ item.step_status === -1 ? '平台审核失败' : '第三方平台审核失败' }}
                    </text>
                    <text v-else>{{item.desc}}</text>
                  </view>
                </view>
              </view>

             <!-- 右侧按钮 -->
             <view class="step_right"
               :class="{
                 'step_right_done': item.step_status === 1,             // 已完成
                 'step_right_current': reviewType === index + 1,        // 当前进行中
                 'step_right_pending': item.step_status === 0 && reviewType !== index + 1, // 未开始
                 'step_right_error': item.step_status < 0              // 失败
               }"
               @click="(item.step_status === 0 || item.step_status < 0) ? toPage(index + 1) : null"
             >
               {{ item.btn_name }}
             </view>

            </view>
          </view>
        </view>
      </view>
    </block>

    <view style="height:200rpx;"></view>
  </view>
</template>


<script>
	export default {
		data() {
			return {
				reviewType: 0,
				stepData: [{
						title: '完善证件资料',
						subtitle: '副标题',
						desc: '简介',
						btn_name: '去填写',
						step_status: 0
					},
					{
						title: '与平台签约',
						subtitle: '副标题',
						desc: '简介',
						btn_name: '去签约',
						step_status: 0
					},
					{
						title: '支付公司签约',
						subtitle: '副标题',
						desc: '简介',
						btn_name: '审核中',
						step_status: 0
					},
					{
						title: '恭喜，开通成功',
						subtitle: '副标题',
						desc: '简介',
						btn_name: '去开通',
						step_status: 0
					},
				],
				signurl: {}
			}
		},
		onLoad() {
			this.getApplication();
		},
		methods: {
			// 跳转页面
			toPage(step) {
				if (step === 1) {
					uni.navigateTo({
						url: '/pages/apply/fastinfo'
					});
				} else if (step === 2) {
					uni.navigateTo({
						url: `/pages/apply/sign_web_view?url=${this.signurl.body.data.url}`
					});
				}else{
					uni.navigateTo({
						url: '/pages/apply/fastinfo'
					});
				}
			},

			// 获取审核状态
			getApplication() {
				uni.showLoading({
					title: '加载中'
				});
				this.$api.sendRequest({
					url: "/shopapi/apply/getShopApplyStatus",
					data: {
						member_id: uni.getStorageSync("member_id")
					},
					success: (res) => {
						if (res.data) {
							this.reviewType = res.data.apply_state;
							this.signurl = JSON.parse(res.data.signurl);
							this.stepData = this.updateStepStatus(this.stepData, this.reviewType);
						}
					},
					complete: () => uni.hideLoading()
				});
			},

			// 更新步骤状态与按钮文字
			updateStepStatus(stepData, reviewType) {
			  const normalBtnNames = ['去填写', '去签约', '去认证', '去开通'];
			  const newStepData = stepData.map((item, index) => {
			    if (reviewType > 0) {
			      if (index < reviewType - 1) {
			        // 前面的步骤已完成
			        item.step_status = 1;
			        item.btn_name = '已完成';
			      } else if (index === reviewType - 1) {
			        // 当前步骤正在进行
			        item.step_status = 0;
			        item.btn_name = normalBtnNames[index];
			      } else {
			        // 后续步骤未开始
			        item.step_status = 0;
			        item.btn_name = normalBtnNames[index];
			      }
			    } else if (reviewType < 0) {
			      // 负数表示某一步审核失败
			      const failIndex = Math.abs(reviewType) - 1;
			      if (index < failIndex) {
			        item.step_status = 1;
			        item.btn_name = '已完成';
			      } else if (index === failIndex) {
			        item.step_status = -1;
			        item.btn_name = '去修改';
			      } else {
			        item.step_status = 0;
			        item.btn_name = normalBtnNames[index];
			      }
			    } else {
			      // reviewType = 0，第一步未开始
			      item.step_status = 0;
			      item.btn_name = normalBtnNames[index];
			    }
			    return item;
			  });
			
			  return newStepData;
			}


		}
	}
</script>

<style lang="scss">
	.container {
		padding-bottom: 50rpx;

		/* 头部 */
		.step_header {
			height: 160rpx;
			background: linear-gradient(to bottom, #ffdec7, #f8f8f8);
			padding: 60rpx 40rpx 60rpx 40rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;

			.header_title {
				font-size: 40rpx;
				color: #714e36;
				margin-bottom: 10rpx;
			}

			.header_desc {
				font-size: 28rpx;
				color: #a19494;
			}
		}

		.step_box::after {
			content: '';
			width: 32rpx;
			height: 32rpx;
			border-radius: 10rpx;
			border: 8rpx solid #f0f3f7;
			display: block;
			position: absolute;
			background: #999999;
			border-radius: 50%;
			left: 46rpx;
			top: 34rpx;
		}
		.step_box.step_item_active::after{
			background: #ff6a00;
		}

		/* 步骤列表 */
		.step_box {
			width: 100%;
			display: flex;
			flex-direction: row;
			padding: 30rpx 40rpx;
			box-sizing: border-box;
			position: relative;

			.step_item {
				display: flex;
				flex-direction: row;
				width: 100%;
				position: relative;

				/* 左侧进度条 */
				.step_line {
					width: 2rpx;
					background: #c6c6c6;
					position: absolute;
					left: 30rpx;
					top: 30rpx;
					bottom: -60rpx;

					&.step_line_active {
						background: #ff6a00;
					}

					&.last_step {
						display: none;
					}
				}

				/* 内容 */
				.step_content {
					margin-left: 80rpx;
					flex: 1;

					.step_header_content {
						display: flex;
						justify-content: space-between;
						align-items: center;
						margin-bottom: 10rpx;

						.step_index {
							font-size: 32rpx;
							color: #999;

							&.step_index_active {
								color: #ff6a00;
							}
						}

						.step_subtitle {
							font-size: 24rpx;
							color: #ada3a3;
						}
					}

					/* 步骤详情 */
					.step_body {
						background: #efefef;
						border-radius: 20rpx;
						display: flex;
						justify-content: space-between;
						align-items: center;
						padding: 40rpx 20rpx;

						&.step_body_active {
							background: #fff;
						}

						.step_left {
							display: flex;
							align-items: center;

							.step_icon {
								width: 60rpx;
								height: 60rpx;
								margin-right: 20rpx;

								image {
									width: 100%;
								}
							}

							.step_info {
								display: flex;
								flex-direction: column;

								.step_title {
									font-size: 30rpx;
									color: #333;
								}

								.step_desc {
									font-size: 24rpx;
									color: #999;

									&.step_desc_error {
										color: #f75444;
									}
								}
							}
						}

						/* 按钮 */
						.step_right {
							height: 60rpx;
							line-height: 60rpx;
							text-align: center;
							border-radius: 100rpx;
							color: #fff;
							cursor: pointer;
							padding: 0 30rpx;
							&.step_right_done {
								background-color: #ff6a00; // 已完成
							}

							&.step_right_pending {
								background-color: #b1b0b0; // 未完成
							}

							&.step_right_error {
								background-color: #f75444; // 审核失败
							}
						}
					}
				}
			}
		}
	}
	
	
	
	.step_right {
	  border-radius: 100rpx;
	  height: 60rpx;
	  width: 120rpx;
	  line-height: 60rpx;
	  text-align: center;
	  color: #fff;
	
	  &.step_right_done {
	    background-color: #ff6a00;  // 已完成
	  }
	  &.step_right_current {
	    background-color: #ffb366;  // 当前步骤
	  }
	  &.step_right_pending {
	    background-color: #999999;  // 未开始
	  }
	  &.step_right_error {
	    background-color: #f75444;  // 失败
	  }
	}

</style>